<template>
  <div class="bg-image w-full h-screen relative">
    <div
      class="shadow-2xl px-12 py-14 mx-auto w-max h-max bg-white rounded-xl absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <h3 class="text-center mb-11 text-xl text-gray-600">用户登录</h3>
      <div>
        <div class="mb-2 mb-6">
          <el-input
            class="rounded-lg inp"
            size="large"
            :prefix-icon="User"
            v-model="param.username"
            style="width: 294px"
            placeholder="请输入您的账号"
          />
        </div>
        <div class="mb-2">
          <el-input
            class="rounded-lg inp"
            :prefix-icon="Lock"
            size="large"
            type="password"
            show-password
            v-model="param.password"
            style="width: 294px"
            placeholder="请输入密码"
          />
        </div>
      </div>

      <div class="flex justify-between mt-4 mb-8">
        <el-link
          type="primary"
          :underline="false"
          @click="router.push('/register')"
          >新用户注册</el-link
        >
        <el-link type="info" :underline="false">忘记密码?</el-link>
      </div>
      <el-button
        class="w-full text-lg"
        type="primary"
        size="large"
        @click="login"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import request from "@/utils/request";
import { useRouter } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
const router = useRouter();
const param = ref({});
// 寄存Token
const login = () => {
  console.log(param.value.password);
  request.post("/api/user/login", param.value).then((res) => {
    console.log(res);
    if (res.code === 200) {
      localStorage.setItem("token", res.data.token);
      router.push("/");
    } else {
      // window.alert(res.msg)
    }
  });
};
</script>

<style scoped>
.bg-image {
  background-image: url('@/assets/img/login_bg.png');
  background-size: cover; /* 根据需要调整 */
  background-position: center;
  max-height: 1080px !important;
}
.inp :deep(.el-input__wrapper)  {
  border-radius: 8px; /* 你想要的圆角大小 */
}
</style>
